<template>
	<view class="container">
		<view class="main">
			<view class="details">
				<view class="detail-header">
					<text class="label">提现</text>
					<text class="value">-{{ listData.withdrawalPrice || 0 }}</text>
				</view>
			</view>
			<!-- 提现进度步骤 -->
			<view class="progress-steps">
				<view class="step-list">
					<view class="steps-title">提现进度</view>
					<view class="steps" style="height: 400rpx">
						<u-steps :current="status" dot activeColor="#10BEAF" direction="column">
							<u-steps-item :title="`提现 ¥${listData.withdrawalPrice}`" :desc="listData.createdDateStr"></u-steps-item>
							<u-steps-item :title="statusCode[`${listData.type}${listData.status}`]" :desc="listData.type == 2 && listData.status != 2 && listData.status != 1 ? listData.updateDateStr : statusCodeDesc[`${listData.type}${listData.status}`]">
								<template slot="icon">
									<u-icon v-if="listData.status == 2 || (listData.type == 1 && status == 1)" name="clock-fill" color="#FFB921" size="24" slot="icon"></u-icon>
									<u-icon v-else-if="listData.status == 3" name="info-circle-fill" color="#F02506 " size="24" slot="icon"></u-icon>
									<view v-else class="slot-icon" :style="{ background: listData.status !== 1 ? '#10BEAF' : 'rgb(150, 151, 153)' }"></view>
								</template>
							</u-steps-item>
							<u-steps-item title="成功到账" :desc="status == 2 ? listData.updateDateStr : ''">
								<template slot="icon">
									<u-icon v-if="status == 2" name="checkmark-circle-fill" color="#10BEAF " size="24"></u-icon>
									<view v-else class="slot-icon"></view>
								</template>
							</u-steps-item>
						</u-steps>
						<!-- <uSteps current="1" dot></uSteps> -->
						<!-- <uni-steps :options="list1" :active="active" active-color="red" /> -->
					</view>
				</view>
			
				<!-- 拒单时显示 -->
				<div>
					<view class="line"></view>
					<div class="reason-text" v-if="listData.status == 3 && listData.type != 1">失败原因：{{ listData.remark || '' }}</div>
					<div class="point-body" v-if="listData.type == 2 && listData.status == 3">
						请参考
						<view class="point">发票示例</view>
						或
						<view class="point" @click="copyText">复制开票信息</view>
						重新开票后提交
					</div>
				</div>
			</view>
			
			<!-- 提现详细信息 -->
			<view class="details">
				<!-- <view class="detail-header">
					<text class="label">提现金额（元）</text>
					<text class="value">{{listData.withdrawalPrice || 0}}</text>
				</view> -->
				<div class="detail-body" v-if="listData.type == '1'">
					<view class="detail-item" v-for="(item, index) in detailList" :key="index">
						<view class="label">
							{{ item.label }}
			
							<uni-tooltip content="服务费=提现金额*2%" placement="right" v-if="item.label == '服务费'">
								<uni-icons type="help" size="20" color="#B0B0B0" style="vertical-align: middle"></uni-icons>
							</uni-tooltip>
							
						</view>
			
						<text class="value">{{ listData[item.value] || '' }}</text>
						<view  v-if="item.label == '税费'" style="color: #10BEAF;margin-left: 10rpx" @click="handleToUrl(`/mineComponentPackage/component/check/tax?withdrawalId=${withdrawalId}`)">
							详情
						</view>
					</view>
				</div>
				<div class="detail-body" v-else>
					<view class="detail-item" v-for="(item, index) in detailList2" :key="index">
						<view class="label">
							{{ item.label }}
							<uni-tooltip content="服务费=提现金额*2%" placement="right" v-if="item.label == '服务费'">
								<uni-icons type="help" size="20" color="#B0B0B0" style="vertical-align: middle"></uni-icons>
							</uni-tooltip>
						</view>
			
						<text class="value">{{ listData[item.value]  || '' }}</text>
					</view>
				</div>
			</view>
		</view>
		

		<view class="fixed-bottom" v-if="listData.type == 2 && listData.status == 3">
			<button class="withdraw-btn" @click="handleWithdraw">重新提交发票</button>
		</view>
	</view>
</template>

<script>
export default {
	// 1:提交提现  2:审核中 3:审核失败 4:成功到账 5:审核中
	data() {
		return {
			// 这里可以动态绑定数据
			withdrawalId: null,
			status: 0,
			type: '1',
			status: '0',
			active: 2,
			listData: {},
			copyData: '',
			statusCode: {
				21: '审核中',
				22: '审核中',
				23: '审核不通过',
				25: '审核通过',
				24: '审核通过',
				13: '计算税费',
				12: '计算税费',
				11: '计算税费',
				15: '计算税费',
				14: '计算税费',
			},
			statusCodeDesc: {
				21: '预计1-7个工作日审核完成',
				22: '预计1-7个工作日审核完成',
				12: '预计1-7个工作日计算完成',
				13: '预计1-7个工作日计算完成',
				11: '预计1-7个工作日计算完成',
				15: '预计1-7个工作日计算完成',
				14: '预计1-7个工作日计算完成'
			},
			detailList: [
				{
					label: '提现金额',
					value: 'withdrawalPrice'
				},
				{
					label: '到账金额',
					value: 'receivedPrice'
				},
				{
					label: '税费',
					value: 'taxPrice'
				},
				{
					label: '服务费',
					value: 'servicePrice'
				},
				{
					label: '提现单号',
					value: 'withdrawalId'
				}
				// {
				// 	label: '申请提现日期',
				// 	value: 'dateStr'
				// },
				// {
				// 	label: '提现账户',
				// 	value: '微信零钱'
				// }
			],
			detailList2: [
				{
					label: '提现金额',
					value: 'withdrawalPrice'
				},
				{
					label: '到账金额',
					value: 'receivedPrice'
				},
				{
					label: '服务费',
					value: 'servicePrice'
				},
				{
					label: '提现单号',
					value: 'withdrawalId'
				},
				// {
				// 	label: '申请提现日期',
				// 	value: 'dateStr'
				// },
				{
					label: '开户主体',
					value: 'subjectName'
				},
				{
					label: '对公账户',
					value: 'bankAccount'
				},
				
			]
		};
	},
	onLoad(option) {
		this.withdrawalId = option.withdrawalId;
		this.$post('/yahe/account/withdrawalProgress', { withdrawalId: this.withdrawalId }, '1').then((res) => {
			if (res.success) {
				this.listData = res.content;
				// this.listData.status = 3;
				// this.listData.type = 2
				this.status = Number(this.listData.status) - 1;
				if (this.listData.status == 3) {
					// 审核不通过
					this.status = Number(this.listData.status) - 2;
				}
				if (this.listData.status == 4) {
					// 成功到账
					this.status = Number(this.listData.status) - 2;
				}
				
				if (this.listData.status == 5) {
					// 审核通过
					this.status = Number(this.listData.status) - 4;
				}
			} else {
				this.$toast(res.message, 'none');
			}
		});

		this.$post(`/yahe/account/getInvoice/${this.withdrawalId}`, {}, '1').then((res) => {
			if (res.success) {
				this.copyData = res.content;
			} else {
				this.$toast(res.message, 'none');
			}
		});
	},
	methods: {
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		// 复制文本
		copyText() {
			const text = `公司名称：${this.copyData.invoiceCompanyName}\n纳税号码:${this.copyData.invoiceCompanyNumber}\n提现金额:${this.copyData.withdrawalPrice}`;
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
// @import '@/uni_modules/uview-ui/theme.scss';
</style>

<style scoped lang="less">
.container {
	padding: 24rpx;
	// background-color: #f8f8f8;
	height: 100%;
	box-sizing: border-box;
	.main {
		height: 92%;
		overflow-y: auto;
	}
}

.header {
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.progress-steps {
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
}

.step {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #eee;
}

.step-title {
	font-size: 28rpx;
	color: #333;
}

.step-time {
	font-size: 24rpx;
	color: #999;
}

.details {
	background-color: #fff;
	padding: 0rpx 30rpx;
	// border-radius: 16rpx;
}

.detail-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding: 40rpx 0rpx 28rpx;
}

.detail-body {
	padding: 28rpx 0px 40rpx;
}

.detail-item {
	display: flex;
	justify-content: flex-start;
	// gap: 20rpx;
	align-items: center;
	padding: 18rpx 0;
	::v-deep .uni-tooltip-popup {
		width: 200rpx;
		font-size: 20rpx;
		padding: 12rpx;
	}
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-header .label {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #3a3a3a;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	
}

.detail-header .value {
	margin-top: 20rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 52rpx;
	color: #3a3a3a;
	line-height: 61rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.detail-item .label {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #6d6d6d;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	display: flex;
	width: 180rpx;
}

.detail-item .value {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #3a3a3a;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.withdraw-btn {
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
	border-radius: 88rpx 88rpx 88rpx 88rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.fixed-bottom {
	position: fixed;
	bottom: 20rpx;
	left: 0;
	right: 0;
	padding: 20rpx 40rpx;
}

.reason-text {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 22rpx;
	color: #f02506;
	line-height: 30rpx;
	text-align: justified;
	font-style: normal;
	text-transform: none;
	padding: 28rpx 24rpx;
}

.point-body {
	display: flex;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 22rpx;
	color: #6d6d6d;
	line-height: 26rpx;
	font-style: normal;
	text-transform: none;
	padding: 20rpx 0rpx 32rpx 24rpx;
}

.point {
	margin: 0rpx 10rpx;
	color: #0a978e;
}

.line {
	width: 90%;
	border: 0.5px solid #efefef;
	margin: 8rpx auto 0rpx;
}
</style>

<style lang="less" scoped>
.status-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 92rpx;
	margin: 30rpx;
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	flex-direction: row;
}
.progress-steps {
	.step-list {
		display: flex;
		justify-content: center;
		.steps-title {
			font-weight: 400;
			font-size: 28rpx;
			color: #6d6d6d;
			padding: 20rpx;
		}
		.steps {
			padding: 20rpx;
			flex: 1;
			::v-deep .u-steps-item__content--column {
				margin-left: 20rpx !important;
			}
			::v-deep .u-text {
				flex: 0;
			}
			::v-deep .u-steps-item__wrapper__dot {
				width: 16rpx;
				height: 16rpx;
			}
			::v-deep .u-steps-item__line--column {
				background: repeating-linear-gradient(to bottom, #ebedf0, #ebedf0 1px, transparent 1px, transparent 2px);
			}
			::v-deep .u-steps--column {
				height: 400rpx;
			}
			.slot-icon {
				width: 16rpx;
				height: 16rpx;
				background-color: rgb(150, 151, 153);
				border-radius: 100rpx;
			}
		}
	}
}
</style>
